<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>文章列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modern-css-reset/dist/reset.min.css"/>
    <style>
        body{font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;}
        .container{max-width: 980px;margin: 0 auto;padding: 16px;}
        .toolbar{display:flex;gap:10px;align-items:center;margin-bottom:12px}
        .search{flex:1}
        .search input{width:100%;padding:8px 10px;border:1px solid #d1d5db;border-radius:8px}
        table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden}
        thead th{background:#f9fafb;color:#374151;padding:10px;border-bottom:1px solid #e5e7eb;text-align:left}
        tbody td{padding:10px;border-top:1px solid #f1f5f9}
        tbody tr:hover{background:#f8fafc}
        .actions{display:flex;gap:8px}
        .btn{padding:6px 10px;border-radius:6px;border:1px solid #d1d5db;background:#fff;cursor:pointer;font-size:13px}
        .btn-primary{background:#2563eb;color:#fff;border-color:#2563eb}
        .btn-danger{background:#ef4444;color:#fff;border-color:#ef4444}
        .pagination{display:flex;gap:8px;align-items:center;margin-top:12px}
        .page-btn{padding:6px 10px;border-radius:6px;border:1px solid #d1d5db;background:#fff;cursor:pointer}
        .page-info{font-size:12px;color:#6b7280}
    </style>
</head>
<body>
<div class="container">
    <h2>文章列表</h2>
    <div class="toolbar">
        <div class="search"><input id="searchInput" placeholder="搜索标题或标签..."/></div>
        <a th:href="@{/articles}" class="btn">刷新</a>
        <a th:href="@{/article-create.html}" class="btn btn-primary">发布新文章</a>
    </div>
    <table id="articleTable">
        <thead>
            <tr>
                <th>标题</th>
                <th>分类ID</th>
                <th>作者ID</th>
                <th>标签</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="a,stat : ${articles}" th:data-id="${a.id}">
                <td>
                    <span th:text="${a.title}">标题</span>
                </td>
                <td th:text="${a.categoryId}">0</td>
                <td th:text="${a.authorId}">0</td>
                <td th:text="${a.tags}">无</td>
                <td>
                    <div class="actions">
                        <a th:href="@{'/articles/detail'(id=${a.id})}" class="btn">详情</a>
                        <a th:href="@{'/article-edit.html'(id=${a.id})}" class="btn btn-primary">编辑</a>
                        <button class="btn btn-danger" th:attr="onclick=${'deleteArticle(' + a.id + ')'}">删除</button>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
    <div class="pagination">
        <button class="page-btn" id="prevPage">上一页</button>
        <span class="page-info" id="pageInfo">第 1 页</span>
        <button class="page-btn" id="nextPage">下一页</button>
    </div>

    <h3 style="margin-top:24px">为你推荐</h3>
    <div id="recommend" class="grid"></div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script th:inline="javascript">
        $(function(){
            $.get(/*[[@{/articles/recommend}]]*/ '/articles/recommend', function (html) {
                $("#recommend").html(html);
            }).fail(function () {
                $("#recommend").html('<p>推荐内容加载失败</p>');
            });
            // 简单分页与搜索
            const pageSize = 8;
            let currentPage = 1;
            const $rows = $("#articleTable tbody tr");

            function render(){
                const keyword = $("#searchInput").val().toLowerCase();
                const filtered = $rows.filter(function(){
                    const text = $(this).text().toLowerCase();
                    return text.includes(keyword);
                });
                $rows.hide();
                const start = (currentPage-1)*pageSize;
                const pageRows = filtered.slice(start, start + pageSize);
                pageRows.show();
                const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
                $("#pageInfo").text(`第 ${currentPage} 页 / 共 ${totalPages} 页`);
                $("#prevPage").prop('disabled', currentPage<=1);
                $("#nextPage").prop('disabled', currentPage>=totalPages);
            }

            $("#searchInput").on('input', function(){ currentPage = 1; render(); });
            $("#prevPage").on('click', function(){ if (currentPage>1){ currentPage--; render(); } });
            $("#nextPage").on('click', function(){ currentPage++; render(); });
            render();
        });

        function deleteArticle(id){
            if(!confirm('确定删除该文章吗？删除后不可恢复')) return;
            $.ajax({
                url: /*[[@{/articles/delete}]]*/ '/articles/delete',
                type: 'POST',
                data: { id: id },
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            }).done(function(res){
                try{ res = (typeof res === 'string') ? JSON.parse(res) : res; }catch(e){}
                if(res && res.success){
                    alert('删除成功');
                    const row = document.querySelector(`#articleTable tbody tr[data-id="${id}"]`);
                    if (row) row.remove();
                } else {
                    alert('删除失败');
                }
            }).fail(function(){
                alert('请求失败');
            });
        }
    </script>
</div>
</body>
</html>